<template>
  <div class="role-list">
    <a-card>
      <div class="card-context">
        <div>
          <BarsOutlined /><span style="margin-left: 10px">数据列表</span>
        </div>
        <div>
          <a-button type="primary" @click="visibleModal = true">添加</a-button>
        </div>
      </div>
    </a-card>

    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      ellipsis
      rowKey="roleId"
      style="margin-top: 10px"
    >
      <template #roleName="{ record }">
        <a-tag v-show="!(record.roleId == editRoleId)" color="pink">
          {{ record.roleName }}</a-tag
        >
        <a-input
          v-show="record.roleId == editRoleId"
          v-model:value="record.roleName"
        ></a-input>
      </template>
      <template #roleDes="{ record }">
        <a-tag v-show="!(record.roleId == editRoleId)" color="purple">
          {{ record.roleDes }}
        </a-tag>
        <a-input
          v-show="record.roleId == editRoleId"
          v-model:value="record.roleDes"
        ></a-input>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-button
            v-show="!(record.roleId == editRoleId)"
            @click="edit(record.roleId)"
            :disabled="record.roleId == 1 || record.roleId == 3"
            >编辑</a-button
          >
          <a-button
            v-show="record.roleId == editRoleId"
            @click="save(record)"
            :disabled="record.roleId == 1 || record.roleId == 3"
            >保存</a-button
          >
        </a-space>
      </template>
      <template #expandedRowRender="{ record }">
        <a-row>
          <a-col :span="2">资源</a-col>
          <a-col :span="10">
            <a-tag
              style="margin-top: 5px"
              color="success"
              v-for="item in record.apis"
              :key="item.apiId"
              >{{ item.apiName }}</a-tag
            >
            <a-tag
              color="#87d068"
              v-if="(record.roleId != 1 )&& (record.roleId != 3)"
              @click="editApi(record)"
              ><a>修改</a></a-tag
            >
          </a-col>
          <a-col :span="2">菜单</a-col>
          <a-col :span="10">
            <a-tag
              style="margin-top: 5px"
              color="processing"
              v-for="item in record.menus"
              :key="item.menuId"
              >{{ item.menuName }}</a-tag
            >
            <a-tag
              color="#108ee9"
              v-if="record.roleId != 1 && record.roleId != 3"
              @click="editMenu(record)"
              ><a>修改</a></a-tag
            >
          </a-col>
        </a-row>
      </template>
    </a-table>
    <a-modal v-model:visible="visibleModal" title="添加角色" @ok="addSubmit">
      <a-form
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        ref="addForm"
        :rules="rules"
        :model="addForm"
      >
        <a-form-item label="角色名称" name="roleName">
          <a-input
            placeholder="请输入角色名称"
            v-model:value="addForm.roleName"
          />
        </a-form-item>
        <a-form-item label="角色资源" name="apis">
          <a-select
            placeholder=" 请选择资源"
            mode="tags"
            v-model:value="addForm.apis"
          >
            <a-select-option
              :value="item.apiId"
              v-for="item in selectOption"
              :key="item.apiId"
            >
              {{ item.apiName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="角色菜单" name="menus">
          <a-tree-select
            v-model:value="addForm.menus"
            style="width: 100%"
            :tree-data="treeData"
            tree-checkable
            allow-clear
            :show-checked-strategy="SHOW_PARENT"
            placeholder="请选择/搜索 菜单"
            :replaceFields="replaceFields"
          />
        </a-form-item>

        <a-form-item label="角色描述">
          <a-textarea
            placeholder="请输入角色描述"
            :rows="4"
            v-model:value="addForm.roleDes"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      v-model:visible="visibleModalMenu"
      title="修改角色菜单"
      @ok="editMenuSubmit"
    >
      <a-form
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        ref="editMenuForm"
        :rules="rules"
        :model="editMenuForm"
      >
        <a-form-item label="角色菜单" name="menus">
          <a-tree-select
            v-model:value="editMenuForm.menus"
            style="width: 100%"
            :tree-data="treeData"
            tree-checkable
            allow-clear
            :show-checked-strategy="SHOW_PARENT"
            placeholder="请选择/搜索 菜单"
            :replaceFields="replaceFields"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      v-model:visible="visibleModalApi"
      title="修改角色资源"
      @ok="editApiSubmit"
    >
      <a-form
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        ref="editApiForm"
        :rules="rules"
        :model="editApiForm"
      >
        <a-form-item label="角色资源" name="apis">
          <a-select
            placeholder=" 请选择资源"
            mode="tags"
            v-model:value="editApiForm.apis"
          >
            <a-select-option
              :value="item.apiId"
              v-for="item in selectOption"
              :key="item.apiId"
            >
              {{ item.apiName }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
const columns = [
  {
    title: "角色ID",
    dataIndex: "roleId",
    key: "roleId",
    align: "center",
  },
  {
    title: "名称",
    dataIndex: "roleName",
    key: "roleName",
    align: "center",
    slots: { customRender: "roleName" },
  },
  {
    title: "描述",
    dataIndex: "roleDes",
    key: "roleDes",
    align: "center",
    slots: { customRender: "roleDes" },
  },
  {
    title: "操作",
    key: "action",
    align: "center",
    slots: { customRender: "action" },
  },
];

const data = [];
const treeData = [];
const selectOption = [];
import { TreeSelect } from "ant-design-vue";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import { BarsOutlined, SearchOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

export default {
  components: {
    BarsOutlined,
    SearchOutlined,
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      data,
      columns,
      selectOption,
      visibleModal: false, //添加的框
      visibleModalMenu: false,
      visibleModalApi: false,
      editRoleId: "", //正在编辑的角色id

      //树形菜单配置
      replaceFields: {
        children: "children",
        title: "menuName",
        key: "menuId",
        value: "menuId",
      },
      treeData,
      SHOW_PARENT,
      //==================
      addForm: {
        roleName: "",
        roleDes: "",
        menus: [],
        apis: [],
      },
      rules: {
        roleName: [
          {
            required: true,
            message: "角色名不能为空",
            trigger: "blur",
          },
        ],
        menus: [
          {
            type: "array",
            required: true,
            message: "请选择拥有的菜单",
            trigger: "change",
          },
        ],
        apis: [
          {
            type: "array",
            required: true,
            message: "请选择拥有的资源",
            trigger: "change",
          },
        ],
      },
      editMenuForm: {
        menus: [],
        roleId: "",
      },
      editApiForm: {
        apis: [],
        roleId: "",
      },
    };
  },

  mounted() {
    this.getData();
  },
  methods: {
    //获取数据
    getData() {
      this.$axios
        .get("/admin/role/all")
        .then((response) => {
          this.data = response.data.data;
        })
        .catch(function (error) {
          console.log(error);
        });

      this.$axios.get("/admin/menu/all").then((res) => {
        this.treeData = res.data.data;
      });
      this.$axios.get("admin/api/all").then((res) => {
        this.selectOption = res.data.data;
      });
    },
    //提交 添加role
    addSubmit() {
      this.$refs.addForm
        .validate()
        .then(() => {
          this.$axios
            .post("/admin/role/add", {
              roleName: this.addForm.roleName,
              roleDes: this.addForm.roleDes,
              apis: this.addForm.apis,
              menus: this.addForm.menus,
            })
            .then((res) => {
              if (res.data.code == 2000) {
                message.success("添加成功");
                this.getData();
                this.$refs.addForm.resetFields();
              } else {
                message.error("添加失败");
              }
              this.visibleModal = false;
            });
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
    //修改菜单
    editMenu(menu) {
      this.editMenuForm.roleId = "";
      this.editMenuForm.menus = [];
      this.editMenuForm.roleId = menu.roleId;
      for (let index = 0; index < menu.menus.length; index++) {
        const element = menu.menus[index];
        this.editMenuForm.menus.push(element.menuId);
      }

      this.visibleModalMenu = true;
    },
    //修改资源
    editApi(api) {
      this.editApiForm.roleId = "";
      this.editApiForm.apis = [];
      this.editApiForm.roleId = api.roleId;
      for (let index = 0; index < api.apis.length; index++) {
        const element = api.apis[index];
        this.editApiForm.apis.push(element.apiId);
      }
      this.visibleModalApi = true;
    },
    // 修改菜单提交
    editMenuSubmit() {

      this.$refs.editMenuForm
        .validate()
        .then(() => {
          this.$axios
            .post("/admin/role/roleMenuEdit", {
              roleId: this.editMenuForm.roleId,
              menuIds: this.editMenuForm.menus,
            })
            .then((res) => {
              if (res.data.code == 2000) {
                message.success("添加成功");
                this.getData();
                this.$refs.editMenuForm.resetFields();
              } else {
                message.error("添加失败");
              }
              this.visibleModalMenu = false;
            });
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
    //修改资源提交
    editApiSubmit() {
      this.$refs.editApiForm
        .validate()
        .then(() => {
          this.$axios
            .post("/admin/role/roleApiEdit", {
              roleId: this.editApiForm.roleId,
              apiIds: this.editApiForm.apis,
            })
            .then((res) => {
              if (res.data.code == 2000) {
                message.success("添加成功");
                this.getData();
                this.$refs.editApiForm.resetFields();
              } else {
                message.error("添加失败");
              }
              this.visibleModalApi = false;
            });
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
    //修改角色
    edit(roleId) {
      this.editRoleId = roleId;
    },
    //保存角色修改
    save(role) {
      this.editRoleId = "";
      this.$axios
        .post("/admin/role/edit", {
          roleName: role.roleName,
          roleDes: role.roleDes,
          roleId: role.roleId,
        })
        .then((res) => {
          if (res.data.code == 2000) {
            message.success("修改成功");
          } else {
            message.error("添加失败");
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.role-list {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
.card-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-context > div:nth-child(1) {
  font-size: 20px;
}
</style>